<template>
    <el-col :style="{height:heightLength+'px'}"  class="el-left-menu" :span="3">
        <el-menu  :default-active="active"
                  unique-opened
                  background-color="#2A3542"
                  text-color="#FFFFFF"
                  active-text-color="#F8B300"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                  @open="handleOpen"
		          :default-openeds="openMenuArr"
                  router>
            <el-submenu v-for="(item,index) in routeList" :key="index" :index="item.path">
                <template slot="title">
                    <i :class="item.icon"></i>
                    {{item.name}}
                    </template>
                <el-menu-item-group :key="index" v-for="(list,index) in item.itemList">
                    <el-menu-item :index="list.path">{{list.name}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-col>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
var routerList = require('./router-leftBar.js');
export default {
  data () {
    return {
        active:'',
        scroll:'',
        routeList: routerList.default.routerList,
        heightLength:''
    }
  },
  computed: {
    openMenuArr: function() {
        const defaultOpened = localStorage.getItem('defaultOpened')
        if (defaultOpened) {
            return JSON.parse(defaultOpened)
        } else {
            localStorage.setItem('defaultOpened', JSON.stringify(['/']))
            return ['/']
        }
    }
  },
  watch: {  
      $route(to, from) {  
      }  
  },
  mounted(){

  },
  created(){
      let state = common.getCookie('userType')
      if(state == 'company'){
          this.routeList = routerList.default.routerList
      }else if(state == 'channel'){
          this.routeList = routerList.default.routerList1
      }else if(state == 'bank'){
          this.routeList = routerList.default.routerList2
      }

      this.activePath();
  },
  watch:{

  },
  methods:{
    activePath(){
        let main_path = '';

        if(this.$router.currentRoute.query['main_path'] != undefined) {
          main_path= this.$router.currentRoute.query.main_path;
        }
        if(main_path != '') {
          this.active = main_path;
        } else {
          this.active = this.$router.currentRoute.path
        }
    },
    handleSelect(index, indexPath) {
      this.active = index;
    },
    handleOpen(opened) {
        localStorage.setItem('defaultOpened', JSON.stringify([opened]))
    }
  }
}
</script>

<style  lang="scss">
    .icon-home {
        width: 13px;
        height: 20px;
        -webkit-background-size: cover;
        background-size: cover;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }

    .el-left-menu{
      position: absolute;
      left: 0;
      width: 235px;
      bottom: 0;
      top: 100px;
      .el-menu {
          border-right: none;
          .my-order-icon {
            display: inline-block;
            position: relative;
            top: -2px;
            background-image: url(../../../static/my-order.png);
            background-size: 100%;
            width: 18px;
            height: 21px;
            &:before{
                content: ''
            }
          }
          .my-company-icon {
            display: inline-block;
            position: relative;
            top: -2px;
            background-image: url(../../../static/my-company.png);
            background-size: 100%;
            width: 18px;
            height: 17px;
            transform: scale(1.1);
            &:before{
                content: ''
            }
          }
            .el-icon-account{
                display: inline-block;
                position: relative;
                top: -2px;
                background-image: url(../../../static/my-account.png);
                background-size: 100%;
                width: 25px;
                height: 18px;
                transform: scale(1.1);
                &:before{
                    content: ''
                }
            }
      }
      /*
      .el-submenu__title{
          .el-icon-document{
              position: relative;
              top: -2px;
              background-image: url(../../images/order.png);
              background-size: 100%;
              width: 18px;
              height: 21px;
              &:before{
                  content: ''
              }
          }
      }
      .el-submenu{
          &:nth-child(2){
            .el-icon-document{
              background-image: url(../../images/company.png);
              width: 22px;
              height: 21px;
            }
          }
          &:nth-child(4){
            .el-icon-document{
              background-image: url(../../images/account.png);
              width: 25px;
              height: 18px;
            }
          }
      }
      */
    }
    .el-menu-vertical-demo{
      height: 100%;
      padding-top: 40px;
    }

    .el-menu-item{
        min-width:auto!important;
    }
    .el-menu-item-group__title{
        padding: 0!important;
    }
    .el-menu-item{
        padding-right: 0!important;
        padding-top: 0!important;
        padding-left: 90px !important;
        font-size: 16px;
        a{
            display: block;
            color: #333;
        }
	&.is-active {
	    margin-left: -10px;
	    &:before {
	        font-family:'FontAwesome';
	        content: '\F111';
	        font-size: 7px;
      		position: relative;
      		right: 10px;
	    }
	}
}
.is-active{
    /*color: #ED7018!important;*/
}

.el-submenu__title {
    padding-left: 33px !important;
    font-size: 20px;
    color: #333;
    &:hover {
        /*background: #fff!important;*/
    }
}
@media screen and (max-width: 1440px) {
    .el-left-menu {
      top: 85px;
    }
}
@media screen and (min-width: 1441px) and (max-width: 1600px) {
}

</style>
